<!DOCTYPE html>
<html>
<head>
    <title>Babinet Compensator Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

<canvas id="physicsCanvas" width="500" height="600"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.font = '16px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Helper function to draw an arrow ---
    function drawArrow(fromx, fromy, tox, toy) {
        const headlen = 10; // length of head in pixels
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // --- Drawing parameters ---
    const originX = 150;
    const originY = 300;
    const L = 300;
    const d = 80; // d << L is represented
    const x_pos = 75; // height of the beam

    // --- Draw Axes ---
    // Y-axis
    drawArrow(originX - 40, originY, originX + d + 100, originY);
    ctx.fillText('Y', originX + d + 110, originY);
    // X-axis
    drawArrow(originX, originY + L/2 + 50, originX, originY - L/2 - 50);
    ctx.fillText('X', originX, originY - L/2 - 65);

    // --- Draw Compensator Body ---
    ctx.beginPath();
    ctx.rect(originX, originY - L / 2, d, L);
    ctx.stroke();

    // Draw the diagonal interface
    ctx.beginPath();
    ctx.moveTo(originX, originY + L / 2);
    ctx.lineTo(originX + d, originY - L / 2);
    ctx.stroke();

    // --- Draw Laser Beam ---
    const beamY = originY - x_pos;
    drawArrow(originX - 100, beamY, originX + d + 20, beamY);
    ctx.textAlign = 'left';
    ctx.fillText('narrow beam', originX - 115, beamY - 28);
    ctx.fillText('of laser light', originX - 115, beamY - 12);
    ctx.textAlign = 'center';

    // --- Draw Labels and Dimensions ---

    // Dimension d
    ctx.beginPath();
    ctx.moveTo(originX, originY - L/2 - 20);
    ctx.lineTo(originX + d, originY - L/2 - 20);
    ctx.moveTo(originX, originY - L/2 - 25);
    ctx.lineTo(originX, originY - L/2 - 15);
    ctx.moveTo(originX + d, originY - L/2 - 25);
    ctx.lineTo(originX + d, originY - L/2 - 15);
    ctx.stroke();
    ctx.fillText('d', originX + d/2, originY - L/2 - 30);

    // Dimensions L/2
    const L_dim_x = originX + d + 30;
    // Top L/2
    ctx.beginPath();
    ctx.moveTo(L_dim_x, originY);
    ctx.lineTo(L_dim_x, originY - L/2);
    ctx.moveTo(L_dim_x - 5, originY);
    ctx.lineTo(L_dim_x + 5, originY);
    ctx.moveTo(L_dim_x - 5, originY - L/2);
    ctx.lineTo(L_dim_x + 5, originY - L/2);
    ctx.stroke();
    ctx.fillText('L', L_dim_x + 15, originY - L/4 - 8);
    ctx.beginPath();
    ctx.moveTo(L_dim_x + 10, originY - L/4);
    ctx.lineTo(L_dim_x + 20, originY - L/4);
    ctx.stroke();
    ctx.fillText('2', L_dim_x + 15, originY - L/4 + 8);

    // Bottom L/2
    ctx.beginPath();
    ctx.moveTo(L_dim_x, originY);
    ctx.lineTo(L_dim_x, originY + L/2);
    ctx.moveTo(L_dim_x - 5, originY);
    ctx.lineTo(L_dim_x + 5, originY);
    ctx.moveTo(L_dim_x - 5, originY + L/2);
    ctx.lineTo(L_dim_x + 5, originY + L/2);
    ctx.stroke();
    ctx.fillText('L', L_dim_x + 15, originY + L/4 - 8);
    ctx.beginPath();
    ctx.moveTo(L_dim_x + 10, originY + L/4);
    ctx.lineTo(L_dim_x + 20, originY + L/4);
    ctx.stroke();
    ctx.fillText('2', L_dim_x + 15, originY + L/4 + 8);
    
    // Dimension x
    const x_dim_x = originX - 30;
    ctx.beginPath();
    ctx.moveTo(x_dim_x, originY);
    ctx.lineTo(x_dim_x, beamY);
    ctx.moveTo(x_dim_x - 5, originY);
    ctx.lineTo(x_dim_x + 5, originY);
    ctx.moveTo(x_dim_x - 5, beamY);
    ctx.lineTo(x_dim_x + 5, beamY);
    ctx.stroke();
    ctx.fillText('x', x_dim_x - 15, originY - x_pos/2);

    // Dimensions d1, d2
    // Intersection x-coordinate: d1 = d * (x_pos + L/2) / L
    const d1 = d * (x_pos + L/2) / L;
    const d2 = d - d1;
    const intersectX = originX + d1;

    ctx.beginPath();
    ctx.moveTo(intersectX, beamY - 5);
    ctx.lineTo(intersectX, beamY + 5);
    ctx.stroke();
    ctx.font = 'italic 16px Times New Roman';
    ctx.fillText('d', originX + d1/2 - 4, beamY - 15);
    ctx.font = 'italic 12px Times New Roman';
    ctx.fillText('1', originX + d1/2 + 2, beamY - 12);

    ctx.font = 'italic 16px Times New Roman';
    ctx.fillText('d', intersectX + d2/2 - 4, beamY - 15);
    ctx.font = 'italic 12px Times New Roman';
    ctx.fillText('2', intersectX + d2/2 + 2, beamY - 12);
    ctx.font = '16px Times New Roman';
    
    // --- Optic Axis (OA) Labels ---
    // Upper wedge
    ctx.font = 'bold 16px Times New Roman';
    drawArrow(originX + d/2 - 10, originY - L/4 + 10, originX + d/2 - 10, originY - L/4 - 10);
    ctx.font = '16px Times New Roman';
    ctx.textAlign = 'left';
    ctx.fillText('OA', originX + d/2, originY - L/4);
    
    // Lower wedge
    ctx.textAlign = 'center';
    ctx.fillText('OA', originX + d/2, originY + L/4);

    // --- Text Key Below Diagram ---
    ctx.textAlign = 'left';
    ctx.font = '16px Times New Roman';
    const textY_start = originY + L/2 + 80;
    
    ctx.fillText('↑ OA = Optic axis in the plane of the paper and parallel to X-axis', 50, textY_start);
    ctx.fillText('● OA = Optic axis perpendicular to the plane of the paper and parallel', 50, textY_start + 25);
    ctx.fillText('to Z-axis', 120, textY_start + 45);

    ctx.font = 'italic 16px Times New Roman';
    ctx.fillText('d << L', 50, textY_start + 90);

    // --- Figure Label ---
    ctx.textAlign = 'center';
    ctx.font = '16px Times New Roman';
    ctx.fillText('Fig. 2.76', canvas.width / 2, canvas.height - 20);

</script>

</body>
</html>